<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { usePopWinProvide } from '../../../common/hooks/FormHooks'
import RebateCreate from './comps/RebateCreate.vue'
import { deleteRebateApi, queryRebateListApi } from '../../../common/service/api/rebateApi'

// 状态
const state:any = reactive({
    search: {
        name: ''
    }
})

/**
 *
 */
const { popState, actions, pageData, pageActions } = usePopWinProvide({
    queryMethod: queryRebateListApi,
    deleteMethod: deleteRebateApi,
    page: true
})

/**
 * 查询接口参数处理
 */
actions.queryList = async () => {
    await pageActions.queryList({ ...state.search })
}

/**
 * 初始化
 */
onMounted(() => {
    actions.queryList()
})
</script>


<template>
  <v-page-list class="share-data" :loading="pageData.isLoading"
               :page-data="pageData"
               @query="actions.queryList()"
               @page-query="pageActions.pageChange()">
    <template #search>
      <div class="form-item1">
        <v-search-input v-model="state.search.name"
                        class="data-search"
                        placeholder="请输入商品名称"
                        normal
                        @enter="actions.queryList()" />
      </div>
      <v-button type="primary"
                icon="sousuo"
                @click="actions.queryList()">
        查询
      </v-button>
      <v-button type="success"
                icon="tianjia2"
                @click="actions.popCreate()">
        添加
      </v-button>
      <v-button type="danger"
                icon="shanchu"
                :disabled="!popState.checkDataSource || popState.checkDataSource.length==0"
                @click="actions.deleteItems()">
        删除
      </v-button>
    </template>

    <el-table :data="pageData.dataSource"
              height="100%"
              style="width:100%;height:100%;"
              border
              highlight-current-row
              @selection-change="actions.checkDataHandler">
      <el-table-column type="selection" width="50" />
      <el-table-column prop="name" label="商品标题" show-overflow-tooltip />
      <el-table-column prop="pointOne" label="一级返点" show-overflow-tooltip width="90" />
      <el-table-column prop="pointTwo" label="二级返点" show-overflow-tooltip width="90" />
      <el-table-column prop="opt" label="操作" align="center" width="120">
        <template #default="{row}">
          <div class="col-btn-box">
            <v-icon button icon="xiugai"
                    title="编辑"
                    class="icon-btn-tb"
                    @click="actions.popEdit(row)" />
            <v-icon button danger
                    icon="shanchu"
                    title="删除"
                    class="icon-btn-tb"
                    @click="actions.deleteItem(row)" />
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!--创建修改窗口-->
    <RebateCreate v-if="popState.isPop" />
  </v-page-list>
</template>

<style scoped lang="scss">
.form-item0{
  flex:none;
  margin-right: 10px;
}
.form-item1{
  flex:none;
  margin-right: 10px;
}

.gap-btn{
  margin-left: 12px;
}

.col-btn-box{
  @include hor-group(center) ;
  flex:none;
  width:100%;
  .icon-btn-tb {
    font-size:18px;
    padding: 0 5px;
    box-sizing: border-box;
    &:hover{
      color:$f-color-light;
    }
  }
}

</style>
